<template>
  <view class="message tn-safe-area-inset-bottom">

    <view v-if="list.length > 0">

      <view class="wallpaper-shadow tn-margin tn-padding" v-for="(item, index) in list" :key="index"
        @click="goDetail(item.id)">
        <view class="tn-flex tn-flex-col-top">
          <!-- 这个是图片形式，自己看需要去使用 -->
          <view class="" v-if="item.complogo">
            <view class="logo-pic">
              <view class="logo-image">
                <view class="" style="width: 100%;height: 100%;background-size: cover;"
                  :style="{ backgroundImage: 'url(' + item.complogo + ')' }">
                </view>
              </view>
            </view>
          </view>
          <view class="tn-padding-left-sm" style="width: 100%;">
            <view class="tn-flex tn-flex-row-between tn-flex-col-between">
              <view class="justify-content-item">
                <text class="tn-color-wallpaper tn-text-lg tn-text-bold">{{ item.companyname }}</text>
              </view>
            </view>
            <view class=" tn-padding-top-xs tn-flex">
              <view class=" tn-padding-top-xs  tn-text-ellipsis-1" style="max-width: 50%;">
                {{item.jobtitle}}
              </view>
              <view class=" tn-padding-top-xs tn-padding-left-sm  tn-text-ellipsis-1">
                {{item.worktype}}
              </view>
              <view class=" tn-padding-top-xs tn-padding-left-sm  tn-text-ellipsis-1">
                {{item.salary}}
              </view>
            </view>
            <view class=" tn-padding-top-xs">
              <text class="tn-text-sm">{{ item.createtime }}</text>
            </view>
          </view>
        </view>
      </view>

    </view>

    <view v-else>
      <tui-no-data imgUrl="/static/img/img_noorder_3x.png">暂无数据</tui-no-data>
    </view>

    <view class="tn-tabbar-height"></view>

    <!-- 底部导航栏组件 -->
    <tabbar :theme="tabbarStyle"></tabbar>

  </view>
</template>
  
<script>
import newsApi from "@/common/api/news.js"

export default {
  name: 'Message',
  data() {
    return {
      list: [],
      hasMore: 1,
      currentPage: 1,
      loadFlag: 'loading',
    }
  },
  onLoad() {
    this.getData()
  },
  async onReachBottom() {
    console.log("onReachBottom")
    if (this.hasMore > 1) {
      this.currentPage++
      this.getData()
    }
  },
  methods: {
    getData() {
      this.loadFlag = 'loading'

      let params = {
        page: this.currentPage
      }

      newsApi.jobList(this, params).then(res => {
        console.log('res-wy',res.data);
        if (res && res.data) {
          this.list = this.list.concat(res.data.data)
          this.hasMore = res.data.total
          this.currentPage = res.data.current_page
          this.loadFlag = 'over'
        }
      })
    },
    // 跳转详情
    goDetail(id) {
      console.log('id',id);
      this.utils.goto('/pagesSubject/hireDetail?id=' + id)
    },
  }
}
</script>
  
<style lang="scss">
page {
  background-color: #fff;
}

.message {
  max-height: 100vh;
}

/* 自定义导航栏内容 start */
.custom-nav {
  height: 100%;

  &__back {
    margin: auto 30rpx;
    font-size: 40rpx;
    margin-right: 10rpx;
    flex-basis: 5%;
    width: 100rpx;
    position: absolute;
  }
}

/* 自定义导航栏内容 end */

/* 底部安全边距 start*/
.tn-tabbar-height {
  min-height: 20rpx;
  height: calc(40rpx + env(safe-area-inset-bottom) / 2);
  height: calc(40rpx + constant(safe-area-inset-bottom));
}


.tn-color-wallpaper {
  color: #1D2541;
}

/* 页面阴影 start*/
.wallpaper-shadow {
  border-radius: 15rpx;
  box-shadow: 0rpx 0rpx 50rpx 0rpx rgba(0, 0, 0, 0.07);
}


/* 图标容器15 start */
.icon15 {
  &__item {
    width: 30%;
    background-color: #FFFFFF;
    border-radius: 10rpx;
    padding: 30rpx;
    margin: 20rpx 10rpx;
    transform: scale(1);
    transition: transform 0.3s linear;
    transform-origin: center center;

    &--icon {
      width: 105rpx;
      height: 105rpx;
      font-size: 60rpx;
      border-radius: 50%;
      margin-bottom: 18rpx;
      position: relative;
      z-index: 1;

      &::after {
        content: " ";
        position: absolute;
        z-index: -1;
        width: 100%;
        height: 100%;
        left: 0;
        bottom: 0;
        border-radius: inherit;
        opacity: 1;
        transform: scale(1, 1);
        background-size: 100% 100%;


      }
    }
  }
}

/* 用户头像 start */
.logo-image {
  width: 140rpx;
  height: 140rpx;
  position: relative;
}

.logo-pic {
  background-size: cover;
  background-repeat: no-repeat;
  // background-attachment:fixed;
  background-position: top;
  border: 1rpx solid rgba(255, 255, 255, 0.05);
  box-shadow: 0rpx 0rpx 80rpx 0rpx rgba(0, 0, 0, 0.05);
  // border-radius: 50%;
  overflow: hidden;
  // background-color: #FFFFFF;
}
</style>
  
  